<template>
  <div class="showCard">
    <div class='cardHeader'>
      <span class='cardHeaderSimp'>
        {{role}}<span style="color:#56D5FF;font-size:16px;">{{cardheadertext}}</span>排名
      </span>
      <span class="cardheaderinfotext">{{cardheaderinfotext}}</span>
    </div>
    <div class="cardTable">
      <table class="table table-striped">
        <thead class="cardTableTheadText">
          <tr>
            <th> </th>
            <th v-for="item in cardtablethead">{{ item.name }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in departmentCenterCard">
            <th scope="row" class="text-center">
              <span class="cardTablerank">{{item[a]}}</span>
            </th>
            <td><img v-bind:src="item.url" class="cardListImg">{{item[b]}}</td>
            <td>{{item[c]}}</td>
            <td v-if="item[d] != null">{{item[d]}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="check-more">
      <span class="wholeRank" :class="{'moreRank':ismore}">查看完整榜单></span>
    </div>
  </div>
</template>

<script>
import BS from '../dataManage'
import { changeKind,changeMsg } from '../vuex/action'
export default {
  data () {
    return {
      ismore:'',
      departmentCenterCard:''
    }
  },
  vuex: {
    getters: {
      kind(state) {
        return state.kind
      },
      msg(state) {
        return state.msg
      }
    }
  },
  props: {
    cardheadertext:{
      type: String
    },
    role:{
      type:String
    },
    cardheaderinfotext:{
      type: String
    },
    cardtablethead: {
      type: Array
    },
    cardurl:{
      type:String
    },
    a:{
      type:String
    },
    b:{
      type:String
    },
    c:{
      type:String
    },
    d:{
      type:String
    }
  },
  methods: {
  },
  ready(){
    var self = this;
    BS.getCardData.call(self,self.msg,self.cardurl,this.kind)
  },
  watch:{
    'msg':function(){
       BS.getCardData.call(this,this.msg,this.cardurl,this.kind);
    },
    'kind':function(){
      BS.getCardData.call(this,this.msg,this.cardurl,this.kind);
    }
  }
}
</script>

<style scoped>
.cardTable .table-striped{
  margin-bottom: 0;
}
div.showCard {
    width: 32%;
    float: left;
    border-radius: 10px;
    background-color:#fff;
    border: none;
    padding: 16px 0;
    min-height: 387px;
    max-height: 467px;
    position: relative;
}
div.showcardActive {
    border: 1px solid #2ACDCE;
    box-shadow: 0 0 10px #2ACDCE;
}
div.showCard div.cardHeader {
  width: 100%;
  height: 70px;
}
div.showCard div.cardHeader span.cardheaderinfotext {
  display: block;
  text-align: center;
  color: #A5B7C3;
}
div.showCard div.cardHeader span.cardHeaderSimp {
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    width: 100%;
    display: block;
    color: #A5B7C3;
}
thead.cardTableTheadText {
  color: #A5B7C3;
}
thead.cardTableTheadText tr th {
  border: none;
}
div.cardTable {
  overflow: hidden;
}
div.cardTable table tbody {
  color: #3f4752;
}
span.cardTablerank {
  display: block;
  color: #fff;
  background: #56D5FF;
  text-align: center;
  height: 24px;
  width: 24px;
  border-radius: 12px;
  padding-top: 4px;
  float: right;
  margin-right: 12px;
}
span.wholeRank {
  display: block;
  text-align: center;
  color: #A5B7C3;
  font-size: 14px;
  background-color: #ffffff;
  margin-top: 16px;
  padding: 8px 0;
  cursor: pointer;
}
span.moreRank{
  background-color: #f9f9f9;
  margin-top: 0!important;
}
.showCard .table>tbody>tr>th,
.showCard .table>tbody>tr>td{
  border-top: none;
  vertical-align: middle;
}
.cardListImg{
  max-width: 24px;
  border-radius: 24px;
  margin-right: 8px;
}
</style>
